<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2450261" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xf285;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xf285;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf286;</span>
                <div class="name">显示</div>
                <div class="code-name">&amp;#xf286;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf287;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xf287;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf288;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xf288;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf289;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xf289;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf28b;</span>
                <div class="name">拍摄</div>
                <div class="code-name">&amp;#xf28b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf28c;</span>
                <div class="name">音乐</div>
                <div class="code-name">&amp;#xf28c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf28d;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xf28d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf28e;</span>
                <div class="name">打卡</div>
                <div class="code-name">&amp;#xf28e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf28f;</span>
                <div class="name">倒计时</div>
                <div class="code-name">&amp;#xf28f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf290;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xf290;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf291;</span>
                <div class="name">卡包</div>
                <div class="code-name">&amp;#xf291;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf292;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xf292;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf293;</span>
                <div class="name">银行卡</div>
                <div class="code-name">&amp;#xf293;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf294;</span>
                <div class="name">折扣券</div>
                <div class="code-name">&amp;#xf294;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf295;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xf295;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf296;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xf296;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf297;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xf297;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf298;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xf298;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf299;</span>
                <div class="name">活动</div>
                <div class="code-name">&amp;#xf299;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf29a;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xf29a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf29b;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xf29b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf29c;</span>
                <div class="name">邀请</div>
                <div class="code-name">&amp;#xf29c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf29d;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xf29d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf29e;</span>
                <div class="name">礼品</div>
                <div class="code-name">&amp;#xf29e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf29f;</span>
                <div class="name">理财</div>
                <div class="code-name">&amp;#xf29f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a0;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xf2a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a1;</span>
                <div class="name">等级</div>
                <div class="code-name">&amp;#xf2a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a2;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xf2a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a3;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xf2a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a4;</span>
                <div class="name">金额</div>
                <div class="code-name">&amp;#xf2a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a5;</span>
                <div class="name">金融</div>
                <div class="code-name">&amp;#xf2a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a6;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xf2a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a7;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xf2a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a8;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xf2a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2a9;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xf2a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2aa;</span>
                <div class="name">拍照</div>
                <div class="code-name">&amp;#xf2aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ab;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xf2ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ac;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xf2ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ad;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xf2ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ae;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xf2ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2af;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xf2af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b0;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xf2b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b1;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xf2b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b2;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xf2b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b3;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xf2b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b4;</span>
                <div class="name">快进</div>
                <div class="code-name">&amp;#xf2b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b5;</span>
                <div class="name">快退</div>
                <div class="code-name">&amp;#xf2b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b6;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xf2b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b7;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xf2b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b8;</span>
                <div class="name">生活</div>
                <div class="code-name">&amp;#xf2b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2b9;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xf2b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ba;</span>
                <div class="name">扫描</div>
                <div class="code-name">&amp;#xf2ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2bb;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xf2bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2bc;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xf2bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2bd;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xf2bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2be;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xf2be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2bf;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xf2bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c0;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xf2c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c1;</span>
                <div class="name">直播</div>
                <div class="code-name">&amp;#xf2c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c2;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xf2c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c3;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xf2c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c4;</span>
                <div class="name">兑换券</div>
                <div class="code-name">&amp;#xf2c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c5;</span>
                <div class="name">红包</div>
                <div class="code-name">&amp;#xf2c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c6;</span>
                <div class="name">奖杯</div>
                <div class="code-name">&amp;#xf2c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c7;</span>
                <div class="name">排行榜</div>
                <div class="code-name">&amp;#xf2c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c8;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xf2c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c9;</span>
                <div class="name">积分</div>
                <div class="code-name">&amp;#xf2c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ca;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xf2ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2cb;</span>
                <div class="name">待付款</div>
                <div class="code-name">&amp;#xf2cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2cc;</span>
                <div class="name">购物</div>
                <div class="code-name">&amp;#xf2cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2cd;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xf2cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ce;</span>
                <div class="name">拼团</div>
                <div class="code-name">&amp;#xf2ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2cf;</span>
                <div class="name">待发货</div>
                <div class="code-name">&amp;#xf2cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d0;</span>
                <div class="name">待收货</div>
                <div class="code-name">&amp;#xf2d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d1;</span>
                <div class="name">收益</div>
                <div class="code-name">&amp;#xf2d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d2;</span>
                <div class="name">售后</div>
                <div class="code-name">&amp;#xf2d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d3;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xf2d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d4;</span>
                <div class="name">合作</div>
                <div class="code-name">&amp;#xf2d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d5;</span>
                <div class="name">明细</div>
                <div class="code-name">&amp;#xf2d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d6;</span>
                <div class="name">物流</div>
                <div class="code-name">&amp;#xf2d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d7;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xf2d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d8;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xf2d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2d9;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xf2d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2da;</span>
                <div class="name">金币</div>
                <div class="code-name">&amp;#xf2da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2db;</span>
                <div class="name">权益</div>
                <div class="code-name">&amp;#xf2db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2dc;</span>
                <div class="name">鼠标</div>
                <div class="code-name">&amp;#xf2dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2dd;</span>
                <div class="name">计算器</div>
                <div class="code-name">&amp;#xf2dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2de;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xf2de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2df;</span>
                <div class="name">摄像头</div>
                <div class="code-name">&amp;#xf2df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e0;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xf2e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e1;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xf2e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e3;</span>
                <div class="name">影视</div>
                <div class="code-name">&amp;#xf2e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e4;</span>
                <div class="name">购物袋</div>
                <div class="code-name">&amp;#xf2e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e5;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xf2e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e6;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xf2e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e7;</span>
                <div class="name">皇冠</div>
                <div class="code-name">&amp;#xf2e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e8;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xf2e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2e9;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xf2e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ea;</span>
                <div class="name">预警</div>
                <div class="code-name">&amp;#xf2ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2eb;</span>
                <div class="name">运动</div>
                <div class="code-name">&amp;#xf2eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ec;</span>
                <div class="name">指导</div>
                <div class="code-name">&amp;#xf2ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ed;</span>
                <div class="name">内存</div>
                <div class="code-name">&amp;#xf2ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ee;</span>
                <div class="name">皮肤</div>
                <div class="code-name">&amp;#xf2ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ef;</span>
                <div class="name">通讯录</div>
                <div class="code-name">&amp;#xf2ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f0;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xf2f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f1;</span>
                <div class="name">查询任务</div>
                <div class="code-name">&amp;#xf2f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f2;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xf2f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f3;</span>
                <div class="name">添加好友</div>
                <div class="code-name">&amp;#xf2f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f4;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xf2f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f5;</span>
                <div class="name">选中好友</div>
                <div class="code-name">&amp;#xf2f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f6;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xf2f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f7;</span>
                <div class="name">删除好友</div>
                <div class="code-name">&amp;#xf2f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f8;</span>
                <div class="name">证件</div>
                <div class="code-name">&amp;#xf2f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2f9;</span>
                <div class="name">资讯</div>
                <div class="code-name">&amp;#xf2f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2fa;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xf2fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2fb;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xf2fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2fc;</span>
                <div class="name">邮件</div>
                <div class="code-name">&amp;#xf2fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2fd;</span>
                <div class="name">组织</div>
                <div class="code-name">&amp;#xf2fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2fe;</span>
                <div class="name">表单</div>
                <div class="code-name">&amp;#xf2fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2ff;</span>
                <div class="name">导航</div>
                <div class="code-name">&amp;#xf2ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf300;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xf300;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf301;</span>
                <div class="name">公告</div>
                <div class="code-name">&amp;#xf301;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf302;</span>
                <div class="name">火热</div>
                <div class="code-name">&amp;#xf302;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf303;</span>
                <div class="name">通话</div>
                <div class="code-name">&amp;#xf303;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf304;</span>
                <div class="name">音乐</div>
                <div class="code-name">&amp;#xf304;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf305;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xf305;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf306;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xf306;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf307;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xf307;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf308;</span>
                <div class="name">更新</div>
                <div class="code-name">&amp;#xf308;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf309;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xf309;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30a;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xf30a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30b;</span>
                <div class="name">模板</div>
                <div class="code-name">&amp;#xf30b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30c;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xf30c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30d;</span>
                <div class="name">统计</div>
                <div class="code-name">&amp;#xf30d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30e;</span>
                <div class="name">云存储</div>
                <div class="code-name">&amp;#xf30e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf30f;</span>
                <div class="name">酒水</div>
                <div class="code-name">&amp;#xf30f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf310;</span>
                <div class="name">全频</div>
                <div class="code-name">&amp;#xf310;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf311;</span>
                <div class="name">小屏</div>
                <div class="code-name">&amp;#xf311;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf312;</span>
                <div class="name">循环</div>
                <div class="code-name">&amp;#xf312;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf313;</span>
                <div class="name">隐藏</div>
                <div class="code-name">&amp;#xf313;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf314;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xf314;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf315;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xf315;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf316;</span>
                <div class="name">列表</div>
                <div class="code-name">&amp;#xf316;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf317;</span>
                <div class="name">汇总</div>
                <div class="code-name">&amp;#xf317;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf318;</span>
                <div class="name">交易</div>
                <div class="code-name">&amp;#xf318;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf319;</span>
                <div class="name">选项</div>
                <div class="code-name">&amp;#xf319;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31a;</span>
                <div class="name">游戏</div>
                <div class="code-name">&amp;#xf31a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31b;</span>
                <div class="name">活动</div>
                <div class="code-name">&amp;#xf31b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31c;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xf31c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31d;</span>
                <div class="name">截图</div>
                <div class="code-name">&amp;#xf31d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31e;</span>
                <div class="name">语言</div>
                <div class="code-name">&amp;#xf31e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf31f;</span>
                <div class="name">广告</div>
                <div class="code-name">&amp;#xf31f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf320;</span>
                <div class="name">记录</div>
                <div class="code-name">&amp;#xf320;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf321;</span>
                <div class="name">亮度</div>
                <div class="code-name">&amp;#xf321;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf322;</span>
                <div class="name">美食</div>
                <div class="code-name">&amp;#xf322;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf323;</span>
                <div class="name">百货</div>
                <div class="code-name">&amp;#xf323;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf324;</span>
                <div class="name">出行</div>
                <div class="code-name">&amp;#xf324;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf325;</span>
                <div class="name">健康</div>
                <div class="code-name">&amp;#xf325;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf326;</span>
                <div class="name">资源</div>
                <div class="code-name">&amp;#xf326;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf327;</span>
                <div class="name">蓝牙</div>
                <div class="code-name">&amp;#xf327;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf328;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xf328;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf329;</span>
                <div class="name">无消息</div>
                <div class="code-name">&amp;#xf329;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf32a;</span>
                <div class="name">学业</div>
                <div class="code-name">&amp;#xf32a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf32b;</span>
                <div class="name">楼房</div>
                <div class="code-name">&amp;#xf32b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf32c;</span>
                <div class="name">评价</div>
                <div class="code-name">&amp;#xf32c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf32d;</span>
                <div class="name">疑问</div>
                <div class="code-name">&amp;#xf32d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf32e;</span>
                <div class="name">自定义</div>
                <div class="code-name">&amp;#xf32e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf32f;</span>
                <div class="name">检查</div>
                <div class="code-name">&amp;#xf32f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf330;</span>
                <div class="name">减少</div>
                <div class="code-name">&amp;#xf330;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf331;</span>
                <div class="name">书籍</div>
                <div class="code-name">&amp;#xf331;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf332;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xf332;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf333;</span>
                <div class="name">精选</div>
                <div class="code-name">&amp;#xf333;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf334;</span>
                <div class="name">性别</div>
                <div class="code-name">&amp;#xf334;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf335;</span>
                <div class="name">勋章</div>
                <div class="code-name">&amp;#xf335;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf336;</span>
                <div class="name">版权</div>
                <div class="code-name">&amp;#xf336;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf337;</span>
                <div class="name">权限</div>
                <div class="code-name">&amp;#xf337;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf338;</span>
                <div class="name">全选</div>
                <div class="code-name">&amp;#xf338;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf339;</span>
                <div class="name">备份</div>
                <div class="code-name">&amp;#xf339;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.My-new-iconxihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxianshi"></span>
            <div class="name">
              显示
            </div>
            <div class="code-name">.My-new-iconxianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.My-new-iconxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.My-new-icontongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.My-new-iconwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpaishe"></span>
            <div class="name">
              拍摄
            </div>
            <div class="code-name">.My-new-iconpaishe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyinle"></span>
            <div class="name">
              音乐
            </div>
            <div class="code-name">.My-new-iconyinle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.My-new-iconyuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondaka"></span>
            <div class="name">
              打卡
            </div>
            <div class="code-name">.My-new-icondaka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondaojishi"></span>
            <div class="name">
              倒计时
            </div>
            <div class="code-name">.My-new-icondaojishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhuiyuan"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.My-new-iconhuiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconkabao"></span>
            <div class="name">
              卡包
            </div>
            <div class="code-name">.My-new-iconkabao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconnaozhong"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.My-new-iconnaozhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyinhangka"></span>
            <div class="name">
              银行卡
            </div>
            <div class="code-name">.My-new-iconyinhangka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzhekouquan"></span>
            <div class="name">
              折扣券
            </div>
            <div class="code-name">.My-new-iconzhekouquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.My-new-iconfenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.My-new-iconshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconsousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.My-new-iconsousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.My-new-iconpinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhuodong"></span>
            <div class="name">
              活动
            </div>
            <div class="code-name">.My-new-iconhuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.My-new-iconshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbiaoqian"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.My-new-iconbiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyaoqing"></span>
            <div class="name">
              邀请
            </div>
            <div class="code-name">.My-new-iconyaoqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyouhuiquan"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.My-new-iconyouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconlipin"></span>
            <div class="name">
              礼品
            </div>
            <div class="code-name">.My-new-iconlipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconlicai"></span>
            <div class="name">
              理财
            </div>
            <div class="code-name">.My-new-iconlicai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.My-new-iconshoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondengji"></span>
            <div class="name">
              等级
            </div>
            <div class="code-name">.My-new-icondengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondianpu"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.My-new-icondianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.My-new-icondingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjine"></span>
            <div class="name">
              金额
            </div>
            <div class="code-name">.My-new-iconjine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjinrong"></span>
            <div class="name">
              金融
            </div>
            <div class="code-name">.My-new-iconjinrong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconliwu"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.My-new-iconliwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.My-new-iconshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwode1"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.My-new-iconwode1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.My-new-icondianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpaizhao"></span>
            <div class="name">
              拍照
            </div>
            <div class="code-name">.My-new-iconpaizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.My-new-iconshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.My-new-iconxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.My-new-iconfenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icongouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.My-new-icongouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyinliang"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.My-new-iconyinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.My-new-iconzanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.My-new-iconbofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.My-new-iconbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfaxian"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.My-new-iconfaxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconkuaijin"></span>
            <div class="name">
              快进
            </div>
            <div class="code-name">.My-new-iconkuaijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconkuaitui"></span>
            <div class="name">
              快退
            </div>
            <div class="code-name">.My-new-iconkuaitui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfenlei1"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.My-new-iconfenlei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.My-new-iconshangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshenghuo"></span>
            <div class="name">
              生活
            </div>
            <div class="code-name">.My-new-iconshenghuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshouye1"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.My-new-iconshouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconsaomiao"></span>
            <div class="name">
              扫描
            </div>
            <div class="code-name">.My-new-iconsaomiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshouye2"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.My-new-iconshouye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.My-new-iconxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxiaoxi1"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.My-new-iconxiaoxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondingwei"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.My-new-icondingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.My-new-iconshuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwenjian1"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.My-new-iconwenjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzhibo"></span>
            <div class="name">
              直播
            </div>
            <div class="code-name">.My-new-iconzhibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.My-new-iconshaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwenjianjia"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.My-new-iconwenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconduihuanquan"></span>
            <div class="name">
              兑换券
            </div>
            <div class="code-name">.My-new-iconduihuanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhongbao"></span>
            <div class="name">
              红包
            </div>
            <div class="code-name">.My-new-iconhongbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjiangbei"></span>
            <div class="name">
              奖杯
            </div>
            <div class="code-name">.My-new-iconjiangbei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpaihangbang"></span>
            <div class="name">
              排行榜
            </div>
            <div class="code-name">.My-new-iconpaihangbang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconerweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.My-new-iconerweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjifen"></span>
            <div class="name">
              积分
            </div>
            <div class="code-name">.My-new-iconjifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconmima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.My-new-iconmima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondaifukuan"></span>
            <div class="name">
              待付款
            </div>
            <div class="code-name">.My-new-icondaifukuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icongouwu"></span>
            <div class="name">
              购物
            </div>
            <div class="code-name">.My-new-icongouwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconkehu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.My-new-iconkehu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpintuan"></span>
            <div class="name">
              拼团
            </div>
            <div class="code-name">.My-new-iconpintuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondaifahuo"></span>
            <div class="name">
              待发货
            </div>
            <div class="code-name">.My-new-icondaifahuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondaishouhuo"></span>
            <div class="name">
              待收货
            </div>
            <div class="code-name">.My-new-icondaishouhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshouyi"></span>
            <div class="name">
              收益
            </div>
            <div class="code-name">.My-new-iconshouyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshouhou"></span>
            <div class="name">
              售后
            </div>
            <div class="code-name">.My-new-iconshouhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.My-new-iconditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhezuo"></span>
            <div class="name">
              合作
            </div>
            <div class="code-name">.My-new-iconhezuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconmingxi"></span>
            <div class="name">
              明细
            </div>
            <div class="code-name">.My-new-iconmingxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwuliu"></span>
            <div class="name">
              物流
            </div>
            <div class="code-name">.My-new-iconwuliu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbaocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.My-new-iconbaocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.My-new-icondayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfenxiang1"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.My-new-iconfenxiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjinbi"></span>
            <div class="name">
              金币
            </div>
            <div class="code-name">.My-new-iconjinbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconquanyi"></span>
            <div class="name">
              权益
            </div>
            <div class="code-name">.My-new-iconquanyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshubiao"></span>
            <div class="name">
              鼠标
            </div>
            <div class="code-name">.My-new-iconshubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjisuanqi"></span>
            <div class="name">
              计算器
            </div>
            <div class="code-name">.My-new-iconjisuanqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconrili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.My-new-iconrili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshexiangtou"></span>
            <div class="name">
              摄像头
            </div>
            <div class="code-name">.My-new-iconshexiangtou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbianji1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.My-new-iconbianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfaxian1"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.My-new-iconfaxian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyingshi"></span>
            <div class="name">
              影视
            </div>
            <div class="code-name">.My-new-iconyingshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icongouwudai"></span>
            <div class="name">
              购物袋
            </div>
            <div class="code-name">.My-new-icongouwudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconguanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.My-new-iconguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconguanbi1"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.My-new-iconguanbi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhuangguan"></span>
            <div class="name">
              皇冠
            </div>
            <div class="code-name">.My-new-iconhuangguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconlianjie"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.My-new-iconlianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.My-new-icontishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyujing"></span>
            <div class="name">
              预警
            </div>
            <div class="code-name">.My-new-iconyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyundong"></span>
            <div class="name">
              运动
            </div>
            <div class="code-name">.My-new-iconyundong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzhidao"></span>
            <div class="name">
              指导
            </div>
            <div class="code-name">.My-new-iconzhidao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconneicun"></span>
            <div class="name">
              内存
            </div>
            <div class="code-name">.My-new-iconneicun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpifu"></span>
            <div class="name">
              皮肤
            </div>
            <div class="code-name">.My-new-iconpifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontongxunlu"></span>
            <div class="name">
              通讯录
            </div>
            <div class="code-name">.My-new-icontongxunlu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.My-new-icontupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconchaxunrenwu"></span>
            <div class="name">
              查询任务
            </div>
            <div class="code-name">.My-new-iconchaxunrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshuaxin1"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.My-new-iconshuaxin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontianjiahaoyou"></span>
            <div class="name">
              添加好友
            </div>
            <div class="code-name">.My-new-icontianjiahaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwode3"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.My-new-iconwode3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxuanzhonghaoyou"></span>
            <div class="name">
              选中好友
            </div>
            <div class="code-name">.My-new-iconxuanzhonghaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondiannao"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.My-new-icondiannao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshanchuhaoyou"></span>
            <div class="name">
              删除好友
            </div>
            <div class="code-name">.My-new-iconshanchuhaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzhengjian"></span>
            <div class="name">
              证件
            </div>
            <div class="code-name">.My-new-iconzhengjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzixun"></span>
            <div class="name">
              资讯
            </div>
            <div class="code-name">.My-new-iconzixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconanquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.My-new-iconanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.My-new-iconshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyoujian"></span>
            <div class="name">
              邮件
            </div>
            <div class="code-name">.My-new-iconyoujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzuzhi"></span>
            <div class="name">
              组织
            </div>
            <div class="code-name">.My-new-iconzuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbiaodan"></span>
            <div class="name">
              表单
            </div>
            <div class="code-name">.My-new-iconbiaodan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondaohang"></span>
            <div class="name">
              导航
            </div>
            <div class="code-name">.My-new-icondaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icondingwei1"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.My-new-icondingwei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icongonggao"></span>
            <div class="name">
              公告
            </div>
            <div class="code-name">.My-new-icongonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhuore"></span>
            <div class="name">
              火热
            </div>
            <div class="code-name">.My-new-iconhuore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontonghua"></span>
            <div class="name">
              通话
            </div>
            <div class="code-name">.My-new-icontonghua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyinle1"></span>
            <div class="name">
              音乐
            </div>
            <div class="code-name">.My-new-iconyinle1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyinliang1"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.My-new-iconyinliang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbiaoqian1"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.My-new-iconbiaoqian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfangda"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.My-new-iconfangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icongengxin"></span>
            <div class="name">
              更新
            </div>
            <div class="code-name">.My-new-icongengxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconsuoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.My-new-iconsuoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.My-new-iconfanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconmoban"></span>
            <div class="name">
              模板
            </div>
            <div class="code-name">.My-new-iconmoban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconqiehuan"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.My-new-iconqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontongji"></span>
            <div class="name">
              统计
            </div>
            <div class="code-name">.My-new-icontongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyuncunchu"></span>
            <div class="name">
              云存储
            </div>
            <div class="code-name">.My-new-iconyuncunchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjiushui"></span>
            <div class="name">
              酒水
            </div>
            <div class="code-name">.My-new-iconjiushui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconquanpin"></span>
            <div class="name">
              全频
            </div>
            <div class="code-name">.My-new-iconquanpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxiaoping"></span>
            <div class="name">
              小屏
            </div>
            <div class="code-name">.My-new-iconxiaoping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxunhuan"></span>
            <div class="name">
              循环
            </div>
            <div class="code-name">.My-new-iconxunhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyincang"></span>
            <div class="name">
              隐藏
            </div>
            <div class="code-name">.My-new-iconyincang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconcaidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.My-new-iconcaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconfenlei2"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.My-new-iconfenlei2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconliebiao"></span>
            <div class="name">
              列表
            </div>
            <div class="code-name">.My-new-iconliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhuizong"></span>
            <div class="name">
              汇总
            </div>
            <div class="code-name">.My-new-iconhuizong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjiaoyi"></span>
            <div class="name">
              交易
            </div>
            <div class="code-name">.My-new-iconjiaoyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxuanxiang"></span>
            <div class="name">
              选项
            </div>
            <div class="code-name">.My-new-iconxuanxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyouxi"></span>
            <div class="name">
              游戏
            </div>
            <div class="code-name">.My-new-iconyouxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconhuodong1"></span>
            <div class="name">
              活动
            </div>
            <div class="code-name">.My-new-iconhuodong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjiankong"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.My-new-iconjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjietu"></span>
            <div class="name">
              截图
            </div>
            <div class="code-name">.My-new-iconjietu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyuyan"></span>
            <div class="name">
              语言
            </div>
            <div class="code-name">.My-new-iconyuyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconguanggao"></span>
            <div class="name">
              广告
            </div>
            <div class="code-name">.My-new-iconguanggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjilu"></span>
            <div class="name">
              记录
            </div>
            <div class="code-name">.My-new-iconjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconliangdu"></span>
            <div class="name">
              亮度
            </div>
            <div class="code-name">.My-new-iconliangdu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconmeishi"></span>
            <div class="name">
              美食
            </div>
            <div class="code-name">.My-new-iconmeishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbaihuo"></span>
            <div class="name">
              百货
            </div>
            <div class="code-name">.My-new-iconbaihuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconchuhang"></span>
            <div class="name">
              出行
            </div>
            <div class="code-name">.My-new-iconchuhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjiankang"></span>
            <div class="name">
              健康
            </div>
            <div class="code-name">.My-new-iconjiankang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconziyuan"></span>
            <div class="name">
              资源
            </div>
            <div class="code-name">.My-new-iconziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconlanya"></span>
            <div class="name">
              蓝牙
            </div>
            <div class="code-name">.My-new-iconlanya
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshuju"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.My-new-iconshuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconwuxiaoxi"></span>
            <div class="name">
              无消息
            </div>
            <div class="code-name">.My-new-iconwuxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxueye"></span>
            <div class="name">
              学业
            </div>
            <div class="code-name">.My-new-iconxueye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconloufang"></span>
            <div class="name">
              楼房
            </div>
            <div class="code-name">.My-new-iconloufang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconpingjia"></span>
            <div class="name">
              评价
            </div>
            <div class="code-name">.My-new-iconpingjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconyiwen"></span>
            <div class="name">
              疑问
            </div>
            <div class="code-name">.My-new-iconyiwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconzidingyi"></span>
            <div class="name">
              自定义
            </div>
            <div class="code-name">.My-new-iconzidingyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjiancha"></span>
            <div class="name">
              检查
            </div>
            <div class="code-name">.My-new-iconjiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjianshao"></span>
            <div class="name">
              减少
            </div>
            <div class="code-name">.My-new-iconjianshao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconshuji"></span>
            <div class="name">
              书籍
            </div>
            <div class="code-name">.My-new-iconshuji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-icontianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.My-new-icontianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconjingxuan"></span>
            <div class="name">
              精选
            </div>
            <div class="code-name">.My-new-iconjingxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxingbie"></span>
            <div class="name">
              性别
            </div>
            <div class="code-name">.My-new-iconxingbie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconxunzhang"></span>
            <div class="name">
              勋章
            </div>
            <div class="code-name">.My-new-iconxunzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbanquan"></span>
            <div class="name">
              版权
            </div>
            <div class="code-name">.My-new-iconbanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconquanxian"></span>
            <div class="name">
              权限
            </div>
            <div class="code-name">.My-new-iconquanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconquanxuan"></span>
            <div class="name">
              全选
            </div>
            <div class="code-name">.My-new-iconquanxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont My-new-iconbeifen"></span>
            <div class="name">
              备份
            </div>
            <div class="code-name">.My-new-iconbeifen
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont My-new-iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#My-new-iconxihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxianshi"></use>
                </svg>
                <div class="name">显示</div>
                <div class="code-name">#My-new-iconxianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#My-new-iconxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#My-new-icontongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#My-new-iconwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpaishe"></use>
                </svg>
                <div class="name">拍摄</div>
                <div class="code-name">#My-new-iconpaishe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyinle"></use>
                </svg>
                <div class="name">音乐</div>
                <div class="code-name">#My-new-iconyinle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#My-new-iconyuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondaka"></use>
                </svg>
                <div class="name">打卡</div>
                <div class="code-name">#My-new-icondaka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondaojishi"></use>
                </svg>
                <div class="name">倒计时</div>
                <div class="code-name">#My-new-icondaojishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhuiyuan"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#My-new-iconhuiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconkabao"></use>
                </svg>
                <div class="name">卡包</div>
                <div class="code-name">#My-new-iconkabao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconnaozhong"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#My-new-iconnaozhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyinhangka"></use>
                </svg>
                <div class="name">银行卡</div>
                <div class="code-name">#My-new-iconyinhangka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzhekouquan"></use>
                </svg>
                <div class="name">折扣券</div>
                <div class="code-name">#My-new-iconzhekouquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#My-new-iconfenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#My-new-iconshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconsousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#My-new-iconsousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#My-new-iconpinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhuodong"></use>
                </svg>
                <div class="name">活动</div>
                <div class="code-name">#My-new-iconhuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#My-new-iconshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbiaoqian"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#My-new-iconbiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyaoqing"></use>
                </svg>
                <div class="name">邀请</div>
                <div class="code-name">#My-new-iconyaoqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyouhuiquan"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#My-new-iconyouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconlipin"></use>
                </svg>
                <div class="name">礼品</div>
                <div class="code-name">#My-new-iconlipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconlicai"></use>
                </svg>
                <div class="name">理财</div>
                <div class="code-name">#My-new-iconlicai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#My-new-iconshoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondengji"></use>
                </svg>
                <div class="name">等级</div>
                <div class="code-name">#My-new-icondengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondianpu"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#My-new-icondianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#My-new-icondingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjine"></use>
                </svg>
                <div class="name">金额</div>
                <div class="code-name">#My-new-iconjine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjinrong"></use>
                </svg>
                <div class="name">金融</div>
                <div class="code-name">#My-new-iconjinrong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconliwu"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#My-new-iconliwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#My-new-iconshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwode1"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#My-new-iconwode1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#My-new-icondianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpaizhao"></use>
                </svg>
                <div class="name">拍照</div>
                <div class="code-name">#My-new-iconpaizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#My-new-iconshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#My-new-iconxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#My-new-iconfenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icongouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#My-new-icongouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyinliang"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#My-new-iconyinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#My-new-iconzanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#My-new-iconbofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#My-new-iconbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfaxian"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#My-new-iconfaxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconkuaijin"></use>
                </svg>
                <div class="name">快进</div>
                <div class="code-name">#My-new-iconkuaijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconkuaitui"></use>
                </svg>
                <div class="name">快退</div>
                <div class="code-name">#My-new-iconkuaitui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfenlei1"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#My-new-iconfenlei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#My-new-iconshangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshenghuo"></use>
                </svg>
                <div class="name">生活</div>
                <div class="code-name">#My-new-iconshenghuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshouye1"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#My-new-iconshouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconsaomiao"></use>
                </svg>
                <div class="name">扫描</div>
                <div class="code-name">#My-new-iconsaomiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshouye2"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#My-new-iconshouye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#My-new-iconxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxiaoxi1"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#My-new-iconxiaoxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondingwei"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#My-new-icondingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#My-new-iconshuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwenjian1"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#My-new-iconwenjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzhibo"></use>
                </svg>
                <div class="name">直播</div>
                <div class="code-name">#My-new-iconzhibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#My-new-iconshaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwenjianjia"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#My-new-iconwenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconduihuanquan"></use>
                </svg>
                <div class="name">兑换券</div>
                <div class="code-name">#My-new-iconduihuanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhongbao"></use>
                </svg>
                <div class="name">红包</div>
                <div class="code-name">#My-new-iconhongbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjiangbei"></use>
                </svg>
                <div class="name">奖杯</div>
                <div class="code-name">#My-new-iconjiangbei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpaihangbang"></use>
                </svg>
                <div class="name">排行榜</div>
                <div class="code-name">#My-new-iconpaihangbang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconerweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#My-new-iconerweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjifen"></use>
                </svg>
                <div class="name">积分</div>
                <div class="code-name">#My-new-iconjifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconmima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#My-new-iconmima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondaifukuan"></use>
                </svg>
                <div class="name">待付款</div>
                <div class="code-name">#My-new-icondaifukuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icongouwu"></use>
                </svg>
                <div class="name">购物</div>
                <div class="code-name">#My-new-icongouwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconkehu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#My-new-iconkehu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpintuan"></use>
                </svg>
                <div class="name">拼团</div>
                <div class="code-name">#My-new-iconpintuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondaifahuo"></use>
                </svg>
                <div class="name">待发货</div>
                <div class="code-name">#My-new-icondaifahuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondaishouhuo"></use>
                </svg>
                <div class="name">待收货</div>
                <div class="code-name">#My-new-icondaishouhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshouyi"></use>
                </svg>
                <div class="name">收益</div>
                <div class="code-name">#My-new-iconshouyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshouhou"></use>
                </svg>
                <div class="name">售后</div>
                <div class="code-name">#My-new-iconshouhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#My-new-iconditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhezuo"></use>
                </svg>
                <div class="name">合作</div>
                <div class="code-name">#My-new-iconhezuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconmingxi"></use>
                </svg>
                <div class="name">明细</div>
                <div class="code-name">#My-new-iconmingxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwuliu"></use>
                </svg>
                <div class="name">物流</div>
                <div class="code-name">#My-new-iconwuliu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbaocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#My-new-iconbaocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#My-new-icondayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfenxiang1"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#My-new-iconfenxiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjinbi"></use>
                </svg>
                <div class="name">金币</div>
                <div class="code-name">#My-new-iconjinbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconquanyi"></use>
                </svg>
                <div class="name">权益</div>
                <div class="code-name">#My-new-iconquanyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshubiao"></use>
                </svg>
                <div class="name">鼠标</div>
                <div class="code-name">#My-new-iconshubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjisuanqi"></use>
                </svg>
                <div class="name">计算器</div>
                <div class="code-name">#My-new-iconjisuanqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconrili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#My-new-iconrili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshexiangtou"></use>
                </svg>
                <div class="name">摄像头</div>
                <div class="code-name">#My-new-iconshexiangtou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbianji1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#My-new-iconbianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfaxian1"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#My-new-iconfaxian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyingshi"></use>
                </svg>
                <div class="name">影视</div>
                <div class="code-name">#My-new-iconyingshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icongouwudai"></use>
                </svg>
                <div class="name">购物袋</div>
                <div class="code-name">#My-new-icongouwudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconguanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#My-new-iconguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconguanbi1"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#My-new-iconguanbi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhuangguan"></use>
                </svg>
                <div class="name">皇冠</div>
                <div class="code-name">#My-new-iconhuangguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconlianjie"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#My-new-iconlianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#My-new-icontishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyujing"></use>
                </svg>
                <div class="name">预警</div>
                <div class="code-name">#My-new-iconyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyundong"></use>
                </svg>
                <div class="name">运动</div>
                <div class="code-name">#My-new-iconyundong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzhidao"></use>
                </svg>
                <div class="name">指导</div>
                <div class="code-name">#My-new-iconzhidao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconneicun"></use>
                </svg>
                <div class="name">内存</div>
                <div class="code-name">#My-new-iconneicun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpifu"></use>
                </svg>
                <div class="name">皮肤</div>
                <div class="code-name">#My-new-iconpifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontongxunlu"></use>
                </svg>
                <div class="name">通讯录</div>
                <div class="code-name">#My-new-icontongxunlu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#My-new-icontupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconchaxunrenwu"></use>
                </svg>
                <div class="name">查询任务</div>
                <div class="code-name">#My-new-iconchaxunrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshuaxin1"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#My-new-iconshuaxin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontianjiahaoyou"></use>
                </svg>
                <div class="name">添加好友</div>
                <div class="code-name">#My-new-icontianjiahaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwode3"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#My-new-iconwode3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxuanzhonghaoyou"></use>
                </svg>
                <div class="name">选中好友</div>
                <div class="code-name">#My-new-iconxuanzhonghaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondiannao"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#My-new-icondiannao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshanchuhaoyou"></use>
                </svg>
                <div class="name">删除好友</div>
                <div class="code-name">#My-new-iconshanchuhaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzhengjian"></use>
                </svg>
                <div class="name">证件</div>
                <div class="code-name">#My-new-iconzhengjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzixun"></use>
                </svg>
                <div class="name">资讯</div>
                <div class="code-name">#My-new-iconzixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconanquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#My-new-iconanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#My-new-iconshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyoujian"></use>
                </svg>
                <div class="name">邮件</div>
                <div class="code-name">#My-new-iconyoujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzuzhi"></use>
                </svg>
                <div class="name">组织</div>
                <div class="code-name">#My-new-iconzuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbiaodan"></use>
                </svg>
                <div class="name">表单</div>
                <div class="code-name">#My-new-iconbiaodan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondaohang"></use>
                </svg>
                <div class="name">导航</div>
                <div class="code-name">#My-new-icondaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icondingwei1"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#My-new-icondingwei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icongonggao"></use>
                </svg>
                <div class="name">公告</div>
                <div class="code-name">#My-new-icongonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhuore"></use>
                </svg>
                <div class="name">火热</div>
                <div class="code-name">#My-new-iconhuore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontonghua"></use>
                </svg>
                <div class="name">通话</div>
                <div class="code-name">#My-new-icontonghua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyinle1"></use>
                </svg>
                <div class="name">音乐</div>
                <div class="code-name">#My-new-iconyinle1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyinliang1"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#My-new-iconyinliang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbiaoqian1"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#My-new-iconbiaoqian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfangda"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#My-new-iconfangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icongengxin"></use>
                </svg>
                <div class="name">更新</div>
                <div class="code-name">#My-new-icongengxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconsuoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#My-new-iconsuoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#My-new-iconfanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconmoban"></use>
                </svg>
                <div class="name">模板</div>
                <div class="code-name">#My-new-iconmoban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconqiehuan"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#My-new-iconqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontongji"></use>
                </svg>
                <div class="name">统计</div>
                <div class="code-name">#My-new-icontongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyuncunchu"></use>
                </svg>
                <div class="name">云存储</div>
                <div class="code-name">#My-new-iconyuncunchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjiushui"></use>
                </svg>
                <div class="name">酒水</div>
                <div class="code-name">#My-new-iconjiushui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconquanpin"></use>
                </svg>
                <div class="name">全频</div>
                <div class="code-name">#My-new-iconquanpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxiaoping"></use>
                </svg>
                <div class="name">小屏</div>
                <div class="code-name">#My-new-iconxiaoping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxunhuan"></use>
                </svg>
                <div class="name">循环</div>
                <div class="code-name">#My-new-iconxunhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyincang"></use>
                </svg>
                <div class="name">隐藏</div>
                <div class="code-name">#My-new-iconyincang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconcaidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#My-new-iconcaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconfenlei2"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#My-new-iconfenlei2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconliebiao"></use>
                </svg>
                <div class="name">列表</div>
                <div class="code-name">#My-new-iconliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhuizong"></use>
                </svg>
                <div class="name">汇总</div>
                <div class="code-name">#My-new-iconhuizong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjiaoyi"></use>
                </svg>
                <div class="name">交易</div>
                <div class="code-name">#My-new-iconjiaoyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxuanxiang"></use>
                </svg>
                <div class="name">选项</div>
                <div class="code-name">#My-new-iconxuanxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyouxi"></use>
                </svg>
                <div class="name">游戏</div>
                <div class="code-name">#My-new-iconyouxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconhuodong1"></use>
                </svg>
                <div class="name">活动</div>
                <div class="code-name">#My-new-iconhuodong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjiankong"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#My-new-iconjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjietu"></use>
                </svg>
                <div class="name">截图</div>
                <div class="code-name">#My-new-iconjietu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyuyan"></use>
                </svg>
                <div class="name">语言</div>
                <div class="code-name">#My-new-iconyuyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconguanggao"></use>
                </svg>
                <div class="name">广告</div>
                <div class="code-name">#My-new-iconguanggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjilu"></use>
                </svg>
                <div class="name">记录</div>
                <div class="code-name">#My-new-iconjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconliangdu"></use>
                </svg>
                <div class="name">亮度</div>
                <div class="code-name">#My-new-iconliangdu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconmeishi"></use>
                </svg>
                <div class="name">美食</div>
                <div class="code-name">#My-new-iconmeishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbaihuo"></use>
                </svg>
                <div class="name">百货</div>
                <div class="code-name">#My-new-iconbaihuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconchuhang"></use>
                </svg>
                <div class="name">出行</div>
                <div class="code-name">#My-new-iconchuhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjiankang"></use>
                </svg>
                <div class="name">健康</div>
                <div class="code-name">#My-new-iconjiankang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconziyuan"></use>
                </svg>
                <div class="name">资源</div>
                <div class="code-name">#My-new-iconziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconlanya"></use>
                </svg>
                <div class="name">蓝牙</div>
                <div class="code-name">#My-new-iconlanya</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshuju"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#My-new-iconshuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconwuxiaoxi"></use>
                </svg>
                <div class="name">无消息</div>
                <div class="code-name">#My-new-iconwuxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxueye"></use>
                </svg>
                <div class="name">学业</div>
                <div class="code-name">#My-new-iconxueye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconloufang"></use>
                </svg>
                <div class="name">楼房</div>
                <div class="code-name">#My-new-iconloufang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconpingjia"></use>
                </svg>
                <div class="name">评价</div>
                <div class="code-name">#My-new-iconpingjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconyiwen"></use>
                </svg>
                <div class="name">疑问</div>
                <div class="code-name">#My-new-iconyiwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconzidingyi"></use>
                </svg>
                <div class="name">自定义</div>
                <div class="code-name">#My-new-iconzidingyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjiancha"></use>
                </svg>
                <div class="name">检查</div>
                <div class="code-name">#My-new-iconjiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjianshao"></use>
                </svg>
                <div class="name">减少</div>
                <div class="code-name">#My-new-iconjianshao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconshuji"></use>
                </svg>
                <div class="name">书籍</div>
                <div class="code-name">#My-new-iconshuji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-icontianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#My-new-icontianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconjingxuan"></use>
                </svg>
                <div class="name">精选</div>
                <div class="code-name">#My-new-iconjingxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxingbie"></use>
                </svg>
                <div class="name">性别</div>
                <div class="code-name">#My-new-iconxingbie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconxunzhang"></use>
                </svg>
                <div class="name">勋章</div>
                <div class="code-name">#My-new-iconxunzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbanquan"></use>
                </svg>
                <div class="name">版权</div>
                <div class="code-name">#My-new-iconbanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconquanxian"></use>
                </svg>
                <div class="name">权限</div>
                <div class="code-name">#My-new-iconquanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconquanxuan"></use>
                </svg>
                <div class="name">全选</div>
                <div class="code-name">#My-new-iconquanxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#My-new-iconbeifen"></use>
                </svg>
                <div class="name">备份</div>
                <div class="code-name">#My-new-iconbeifen</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
